<template>
  <div class="container">
    <ul>
      <li @click="tab = 'tab1'">显示tab1</li>
      <li @click="tab = 'tab2'">显示tab2</li>
    </ul>
    <hr />
    <!-- 动态组件 -- 通过它本身的is属性的值的变化来显示对应的组件 component标签 -->
    <!-- keep-alive此组件可以保持动态组件中的状态 -->
    <keep-alive>
      <component :is="tab" />
    </keep-alive>
  </div>
</template>

<script>
// 动态组件，通过修改数据来完成加载不同的组件,可以使用动态组件完成tab切换
import tab1 from "./components/tab1";
import tab2 from "./components/tab2";
export default {
  data() {
    return {
      tab: "tab1",
    };
  },
  components: {
    tab1,
    tab2,
  },
};
</script>

<style lang='scss' scoped>
.container {
  width: 500px;
  ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
    li {
      list-style: none;
      cursor: pointer;
    }
  }
}
</style>